<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="logo">
                    <el-avatar :size="60" :src="image" />
                </div>
                <div class="title">
                    <div class="title-master">数智化智能风控</div>
                    <div class="title-subtitle">——现场即现场</div>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <div class="menu">
                        <el-menu default-active="/HomePage" active-text-color="orange" text-color="#fff"
                            background-color="rgb(200, 16, 46)" router>
                            <el-menu-item index="/HomePage">
                                <template #title>
                                    <i class="iconfont icon-zhinengfuzhupingbiao-xiaodiannao"></i>&nbsp;&nbsp;首页
                                </template>
                            </el-menu-item>
                            <el-sub-menu index="/AntecedentPage">
                                <template #title>
                                    <i class="iconfont icon-yushen"></i>&nbsp;&nbsp;可视化审批
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="/AntecedentPage">判别分析</el-menu-item>
                                    <el-menu-item index="/PersonCarMatchPageList">人车匹配度</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="/PSIPage">
                                <template #title>
                                    <i class="iconfont icon-qudaoguanli"></i>&nbsp;&nbsp;团队主动管理
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="/PSIPage">PSI波动监控</el-menu-item>
                                    <el-menu-item index="/ChannelDynamicPenetrationPage">团队动态穿透</el-menu-item>
                                    <el-menu-item index="/InternalControlManagementPage">内控管理</el-menu-item>
                                </el-menu-item-group>

                            </el-sub-menu>
                            <el-sub-menu index="/AntecedentModelManagerPage">
                                <template #title>
                                    <i class="iconfont icon-guanlicaozuorizhi"></i>&nbsp;&nbsp;模型管理模块
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="/AntecedentModelManagerPage">可视化审批模型</el-menu-item>
                                    <el-menu-item index="/PeopleAndVehicleMatchPage">人车匹配度模型</el-menu-item>
                                    <el-menu-item index="/TeamManagerPage">团队管理模型</el-menu-item>
                                </el-menu-item-group>

                            </el-sub-menu>
                            <el-sub-menu index="/OrgAdminPage">
                                <template #title>
                                    <i class="iconfont icon-xitongguanli-"></i>&nbsp;&nbsp;系统管理
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="/OrgAdminPage">机构管理</el-menu-item>
                                    <el-menu-item index="/UserAdminPage">账号管理</el-menu-item>
                                    <el-menu-item index="/PermissionAdminPage">权限管理</el-menu-item>
                                </el-menu-item-group>

                            </el-sub-menu>
                        </el-menu>
                    </div>
                </el-aside>
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>

import { RouterView } from 'vue-router'
import image from "../assets/15735d2b66bc91504575b4c1e731204.jpg"



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.common-layout {
    height: 100vh;
    width: 100%;
}

.el-header {
    background-color: rgba(200, 16, 46, 100);
    height: 100px;
    display: flex;
    flex-direction: row;

    .logo {
        margin-top: 20px;
    }

    .title {
        color: #fff;
        position: absolute;
        left: 100px;

        .title-master {
            font-size: 16px;
            font-weight: 1000;
            font-family: 'Courier New', Courier, monospace;
            margin-top: 30px;
        }

        .title-subtitle {
            font-size: 16px;
            margin-left: 60px;
            margin-top: 6px;
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-weight: 500;

        }
    }
}

.el-aside {
    background-color: rgba(200, 16, 46, 100);
    border-right: #C0C0C0 1px solid;

    .menu {
        margin-left: 30px;
    }
}

.el-container {
    height: 100%;
}

.el-main {
    background-color: rgba(255, 255, 255, 100);
    border-top: #000 2px solid;
    --el-main-padding: 0px;
}
</style>
